<template>
  <div class="about">
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="我的通知">
        <el-input v-model="queryInfo.name" placeholder="请输入关键字" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="mb20">
      <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
      <el-button type="danger" icon="Delete" plain>删除</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="mynoticeId" label="编号" width="75" />
      <el-table-column prop="userId" label="用户id" width="80" />
     
      <el-table-column prop="mynoticeTitle" label="标题" width="120"/>
      <el-table-column prop="mynoticeDetails" label="内容" width="120"/>
      <el-table-column prop="mynoticeCreateTime" label="时间" width="120"/>
      <el-table-column prop="user.id" label="用户id" width="120" />
      <el-table-column prop="user.username" label="用户名" width="120" />
      <!-- <el-table-column prop="user.password" label="密码" width="120" /> -->
      <el-table-column prop="user.nickName" label="昵称" width="120" />
      <el-table-column prop="user.email" label="邮箱" width="120" />
      <el-table-column prop="user.phone" label="手机号" width="120" />
      <el-table-column prop="user.point" label="积分" width="120" />
      <el-table-column prop="user.name" label="姓名" width="120" />
      <el-table-column prop="user.address" label="地址" width="120" />

      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
          <el-button link type="primary" @click="onDel(scope.row.mynoticeId)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
    :page-sizes="[2, 5, 8, 10]" size="default" background="false" layout="total, sizes, prev, pager, next, jumper"
    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <!-- 添加，编辑弹框 -->


  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="mynotice">
      <el-form-item label=" 编号" :label-width="formLabelWidth">
        <el-input v-model="mynotice.mynoticeId" autocomplete="off" style="margin-left: 30px;"/>
      </el-form-item>
      <el-form-item label=" 用户编号" :label-width="formLabelWidth">
        <el-input v-model="mynotice.userId" autocomplete="off" />
      </el-form-item>
      <el-form-item label=" 标题" :label-width="formLabelWidth">
        <el-input v-model="mynotice.mynoticeTitle" autocomplete="off" style="margin-left: 30px;"/>
      </el-form-item>
      <el-form-item label=" 内容" :label-width="formLabelWidth">
        <el-input v-model="mynotice.mynoticeDetails" autocomplete="off" style="margin-left: 30px;"/>
      </el-form-item>
      <el-form-item label=" 创建时间" :label-width="formLabelWidth">
        <el-input v-model="mynotice.mynoticeCreateTime" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>


<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import LogAddCom from './LogAddCom.vue'
import axios from 'axios'

// const fmImg = ref('');


//修改或添加
const saveOrUpdateVisible = ref(false);


const mynotice = ref({
  mynoticeId: 0,
  userId: 0,
  mynoticeName: '',
  mynoticeTitle: '',
  mynoticeDetails: '',
  mynoticeCreateTime: 0,
  user: {
    id: 0,
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: 0,
    name: '',
    address: '',
  }
})

//图片上传

// const handleAvatarSuccess = (response, uploadFile) => {
//   fmImg.value = URL.createObjectURL(uploadFile.raw);
  // 一旦上传成功，则需要把返回的数据赋值给article.imageUrl
  // fm.value.fmImg = response.data;
  //   console.log('response',response)
  //   console.log('uploadFile',uploadFile)
// }


const saveOrUpdateTitle = ref('添加')
// 去修改的页面
const toEdit = (row) => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  mynotice.value = row ;
 
}
//去添加的页面
const toAdd = () => {
  // 展示弹框
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  mynotice.value = {
  mynoticeId: 0,
  userId: 0,
  mynoticeName: '',
  mynoticeTitle: '',
  mynoticeDetails: '',
  mynoticeCreateTime: 0,
  user: {
    id: 0,
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: 0,
    name: '',
    address: '',
  }
}


}
//取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
   mynotice.value = {
  mynoticeId: 0,
  userId: 0,
  mynoticeName: '',
  mynoticeTitle: '',
  mynoticeDetails: '',
  mynoticeCreateTime: 0,
  user: {
    id: 0,
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: 0,
    name: '',
    address: '',
  }
}

}
//保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加') {
    axios.post('/mynotice/mynoticeAdd', mynotice.value).then(resp => {
      let result = resp.data;
      if (result.code == 1) {
        getList();
        ElMessage({
          message: '添加成功！',
          type: 'success',
        })

        close();
      } else {
        ElMessage({
          message: '添加失败！',
          type: 'warning',
        })
      }
    })
  } else if (saveOrUpdateTitle.value == '编辑') {
    axios.put('/mynotice/mynoticeUpdate', mynotice.value).then(resp => {
      let result = resp.data;
      if (result.code == 1) {

        getList();
        ElMessage({
          message: '修改成功！',
          type: 'success',
        })

        close();
      } else {
        ElMessage({
          message: '修改失败！',
          type: 'warning',
        })
      }
    })
  }
}


//定义一个数据总条数
const total = ref(0)
onMounted(() => {
  getList();
})
//动态对象
const queryInfo = ref({
  pageNum: 1,
  pageSize: 2,
  name: '',
  // turl:'',
})
//定义一个方法动态的调用后端的接口，获取文章内容
const getList = () => {
  axios.get('/mynotice/mynoticeSelectByName',
    {
      params: queryInfo.value
        // turl:queryInfo.value.turl
    }
  ).then(resp => {
    let result = resp.data;
    if (result.code == 1) {
      tableData.value = result.data.list;
      // courseList.value=result.data.list;
      //更新总条数
      total.value = result.data.total;
    } else {
      console.log('获取fm列表失败')
    }
  })
}

//分页方法
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}
//图片展示、网址
const url = ref('http://localhost:80/file/downLoad?fileName=')
// 删除
const onDel = id => {
  ElMessageBox.confirm(
    '真的要删除吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('mynotice/mynoticeDelete/'+ id)
        .then(resp => {
          let result = resp.data;
          if (result.code == 1) {
            getList();
            ElMessage({
              message: '删除成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '删除失败！',
              type: 'warning',
            })
          }
        })

    })
    .catch(() => { })
}




const tableData = ref([
])

</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid black;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>